<template>
  <view class="page">
    <!-- 轮播图显示 -->
    <u-swiper @click="clickSwiper" height="497" :list="swiperList"></u-swiper>
    <!-- 信息部分 -->
    <view class="priceBar">
      <view class="price">¥{{detail.goods_price}}</view>
      <view class="icons">
        <u-icon class="item" name="share"></u-icon>
        <u-icon class="item" name="star"></u-icon>
      </view>
    </view>
    <view class="name u-line-2">
      {{detail.goods_name}}
    </view>
    <!-- 富文本 -->
    <view class="richTextTitle">图文详情</view>
    <u-parse :html="detail.goods_introduce"></u-parse>
    <!-- 底部订单栏 -->
    <submitBar :detail="detail"/>
  </view>
</template>

<script>
import submitBar from './components/submitBar.vue'
export default {
  components: {submitBar},
  data() {
    return {
      detail: {},
      swiperList: [],
      htmlStr: "<h1>哈哈哈</h1>"
    }
  },
  async onLoad(options) {
    const {message} = await this.$u.get('/goods/detail', {
      goods_id: options.goods_id || 17928
    })
    console.log(message);
    this.detail = message
    // 在获取到的数据中单独计算轮播图数组, 放入 data
    this.swiperList = this.detail.pics.map(item=>item.pics_sma_url)
  },
  methods: {
    clickSwiper(index){
      console.log(index);
      uni.previewImage({
        urls: this.detail.pics.map(item=>item.pics_big_url),
        current: index
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: 150rpx;
}
.priceBar {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 33rpx;
  font-size: 36rpx;
  .price {
    color: $theme-color;
  }
  .icons {
    color: #707070;
    .item {
      margin: 0 22rpx;
    }
  }
}
.name {
  font-size: 30rpx;
  color: #434343;
  padding: 0 33rpx;
}
.richTextTitle {
  text-align: center;
  font-size: 28rpx;
  color: #434343;
  border-top: 20rpx solid #f9f9f9;
  margin: 48rpx 0 10rpx;
  padding: 20rpx;
}

</style>